<template>
	<view class="page">
		<section class="cart">
			<goodsCart :content="currentUnit"></goodsCart>
			<p class="btn"><u-button @click="getCut" type="primary" shape="circle" :ripple="true">确认无误，领取裁片</u-button></p>
			<!-- <button class="user-set-btn btn" type="primary">领取裁片</button> -->
		</section>
		<!-- // 完成情况 -->
		<section class="table">
			<title title="完成情况"></title>
			<div class="table_content">
				<u-table>
					<u-tr>
						<u-th>S</u-th>
						<u-th>M</u-th>
						<u-th>L</u-th>
						<u-th>XL</u-th>
						<u-th>XXL</u-th>
						<u-th>XXXL</u-th>
					</u-tr>
					<u-tr>
						<u-td>{{ currentUnit.ratio.s }}</u-td>
						<u-td>{{ currentUnit.ratio.m }}</u-td>
						<u-td>{{ currentUnit.ratio.l }}</u-td>
						<u-td>{{ currentUnit.ratio.xl }}</u-td>
						<u-td>{{ currentUnit.ratio.xxl }}</u-td>
						<u-td>{{ currentUnit.ratio.xxxl }}</u-td>
					</u-tr>
				</u-table>
			</div>
		</section>
		<!-- // 出库单 -->
		<section class="table" v-if='detail'>
			<title title="出库单"></title>
			<view class="table_content">
				<u-table>
					<u-tr>
						<u-td class="th">上新日期</u-td>
						<u-td class="td">{{ detail.newDate }}</u-td>
						<u-td class="th">交货日期</u-td>
						<u-td class="td">{{ detail.deliveryDate }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">商品款号</u-td>
						<u-td class="td">{{ detail.goodsItemNo }}</u-td>
						<u-td class="th">件数</u-td>
						<u-td class="td">{{ detail.pieceNum }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">工艺单</u-td>
						<u-td class="td">{{ detail.processOrder }}</u-td>
						<u-td class="th">产前样</u-td>
						<u-td class="td">{{ detail.preProdSample }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">水洗标</u-td>
						<u-td class="td">{{ detail.washTag }}</u-td>
						<u-td class="th">号标</u-td>
						<u-td class="td">{{ detail.sizeMark }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">嵌条</u-td>
						<u-td class="td">{{ detail.fillet }}</u-td>
						<u-td class="th">拉链</u-td>
						<u-td class="td">{{ detail.zipper }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">扣子</u-td>
						<u-td class="td">{{ detail.button }}</u-td>
						<u-td class="th">织带</u-td>
						<u-td class="td">{{ detail.ribbon }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">松紧线</u-td>
						<u-td class="td">{{ detail.lastex }}</u-td>
						<u-td class="th">扣鼻</u-td>
						<u-td class="td">{{ detail.buttonNose }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">花边</u-td>
						<u-td class="td">{{ detail.lace }}</u-td>
						<u-td class="th">腰线</u-td>
						<u-td class="td">{{ detail.beltLine }}</u-td>
					</u-tr>
					<u-tr>
						<u-td class="th">线</u-td>
						<u-td class="td">{{ detail.wire }}</u-td>
						<u-td class="th"></u-td>
						<u-td class="td"></u-td>
					</u-tr>
				</u-table>
			</view>
			<div class='bom_tip'>
				<p>面辅料异常请在一个工作日内反馈</p>
				<p>出库时间：{{detail.outputDate}}</p>
			</div>
		</section>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import goodsCart from '../components/goodsCart.vue';
import title from '../components/title.vue';
import { mapGetters } from 'vuex';
export default {
	components: {
		title,
		goodsCart
	},
	data() {
		return { unitNo: '', detail: {} };
	},
	computed: {
		...mapGetters(['currentUnit'])
	},

	onReady() {
		// listMaterialInfoAndStore
		console.log(this.currentUnit);
		this.getDetail()
	},
	methods: {
		getCut() {
			this.$store.dispatch('receiveSliceCutting', { workNo: this.currentUnit.workNo }).then(res => {
				if (res.errorCode == 0) {
					this.$refs.uToast.show({
						title: '领取成功',
						type: 'success',
						back: true
					});
				}
				console.log(res);
			});
		},
		getDetail() {
			this.$store.dispatch('listMaterialInfoAndStore', { workNo: this.currentUnit.workNo }).then(res => {
		
				console.log(res);
				this.detail = res.data
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 20rpx;
}
.cart {
	background: #fff;
	padding: 40rpx 0 40rpx 30rpx;
	border-radius: 10rpx;
	.btn {
		width: 75%;
		margin: 0 auto;
		margin-top: 30rpx;
	}
}
.table {
	background: #fff;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 10rpx;
	.table_content {
		margin-top: 30rpx;
		.th {
			background: #F5F6F8;
			font-weight: bold;
		}
	}
}
.bom_tip{
	p{
		margin-top: 20rpx ;
	}
	p:last-child{
		text-align: right;
		font-size: 26rpx;
	}
}
</style>
